<template>
	<view class="editor-box">
		<view v-if="showTabBar" class="editor-box-header">
			<view class="operate-box" @click="clickAddImage(uploadImageUrl)">
				<text class="iconfont icon-image"></text>
			</view>
			<view class="operate-box" @click="clickAddItalic">
				<text class="iconfont icon-italic"></text>
			</view>
			<view class="operate-box" @click="clickAddBold">
				<text class="iconfont icon-bold"></text>
			</view>
			<view class="operate-box" @click="clickAddHeader('h1')">
				<text class="iconfont icon-h1"></text>
			</view>
			<view class="operate-box" @click="clickAddHeader('h2')">
				<text class="iconfont icon-h2"></text>
			</view>
			<view class="operate-box" @click="clickAddHeader('h3')">
				<text class="iconfont icon-h3"></text>
			</view>
			<view class="operate-box" @click="clickAddAlign('left')">
				<text class="iconfont icon-alignLeft"></text>
			</view>
			<view class="operate-box" @click="clickAddAlign('right')">
				<text class="iconfont icon-alignRight"></text>
			</view>
			<view class="operate-box" @click="clickAddList('ordered')">
				<text class="iconfont icon-orderedList"></text>
			</view>
			<view class="operate-box" @click="clickAddList('bullet')">
				<text class="iconfont icon-unorderedList"></text>
			</view>
			<view class="operate-box" @click="clickUndo()">
				<text class="iconfont icon-undo"></text>
			</view>
		</view>
		<view class="editor-box-content"><!-- dcloud非常愚蠢，这里ready的函数名不能自定义，必须是onEditorReady，否则不识别 -->
			<editor id="editor" :placeholder="placeholder" style="height: 100%;" @ready="onEditorReady" @input="onInput"
				show-img-resize showImgSize showImgToolbar></editor>
		</view>
	</view>
</template>

<script>
	export default {
		name: "rich-editor",
		props: {
			showTabBar: {
				type: Boolean,
				required: false,
				default: true
			},
			placeholder: {
				type: String,
				required: false,
				default: '请输入文本内容'
			},
			uploadImageUrl: {
				type: String,
				required: true
			}
		},
		data() {
			return {
		
			};
		},
		methods: {
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			uploadImage(path, url) {
				this.$request.postFile(url, this.$params.param_upload_name, path, {}, res => {
					uni.hideLoading()
					let json = JSON.parse(res.data)
					this.editorCtx.insertImage({
						src: this.$params.host + json.data
					})
				})
			},
			clickAddImage(uploadImageUrl) {
				uni.chooseImage({
					success: res => {
						let path = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中……',
							mask: false
						});
						this.uploadImage(res.tempFilePaths[0], uploadImageUrl)
					}
				})
			},
			clickAddItalic() {
				this.editorCtx.format("italic")
			},
			clickAddBold() {
				this.editorCtx.format("bold")
			},
			clickAddHeader(header) {
				this.editorCtx.format("header", header)
			},
			clickAddAlign(align) {
				this.editorCtx.format("align", align)
			},
			clickAddList(list) {
				this.editorCtx.format("list", list)
			},
			clickUndo() {
				this.editorCtx.undo()
			},			
			onInput(e) {
				this.$emit("input", {
					html: e.detail.html,
					text: e.detail.text
				})
			}
		}		
	}
</script>

<style>
	@import url("rich-editor.css");
</style>
